import { useEffect, useState } from "react";
import { DatePicker, Radio } from "antd";
const dateFormat = "YYYY-MM-DD HH:mm:ss";
import moment from "moment";
const timeOptions = ["今天", "近7天", "近14天", "近30天"];
const { RangePicker } = DatePicker;
/**
 * TimeTabs 组件用于展示带有时间选项的标签页。
 *
 * @param {Object} props 组件传入的属性对象。
 * @param {number|string} props.value 当前选中的标签页的值。
 * @param {Function} props.onChange 当标签页选择发生变化时的回调函数。
 * @param {number|string[]} props.tabsValue 标签页选项的值（单选）
 * @returns Array
 */
const TimeTabs = ({ value, onChange, tabsValue }) => {
	const [time, setTime] = useState([]);
	const setTimeFn = (dates, dateStrings) => {
		setTime(dates);
		onChange && onChange(dates, dateStrings);
	};
	const handleChangeTime = name => {
		tabsValue.current = name;
		switch (name) {
			case "今天":
				onChange([moment().startOf("day"), moment().endOf("day")]);
				break;
			case "近7天":
				onChange([moment().startOf("day").subtract(6, "d"), moment().endOf("day")]);
				break;
			case "近14天":
				onChange([moment().startOf("day").subtract(13, "d"), moment().endOf("day")]);
				break;
			case "近30天":
				onChange([moment().startOf("day").subtract(29, "d"), moment().endOf("day")]);
				break;
			default:
				break;
		}
	};
	// 	// 禁用今天6个月之前和之后的日期
	const disabledDate = current => (current && current > moment().endOf("day")) || current < moment().subtract(6, "months");

	useEffect(() => {
		setTime(value);
		// if (!value) handleChangeTime(tabsValue.current);
	}, [value]);
	// useEffect(() => {
	// }, [tabsValue.current]);
	return (
		<div className="flex">
			<RangePicker
				value={time}
				format={dateFormat}
				disabledDate={disabledDate}
				onChange={(dates, dateStrings) => {
					console.log(dateStrings);
					setTimeFn(dates, dateStrings);
				}}
				// ranges={{
				// 	今天: [moment(), moment()],
				// 	最近一周: [moment().startOf("day").subtract(6, "d"), moment().endOf("day")],
				// 	最近一个月: [moment().startOf("day").subtract(30, "d"), moment().endOf("day")],
				// 	最近三个月: [moment().startOf("day").subtract(90, "d"), moment().endOf("day")]
				// }}
				showTime
				allowClear={false}
				className="left-no-radius"
			/>
			<Radio.Group
				value={tabsValue.current}
				size="middle"
				buttonStyle="solid"
				onChange={e => {
					handleChangeTime(e.target.value);
				}}
			>
				{timeOptions.map(name => {
					return (
						<Radio.Button key={name} value={name}>
							{name}
						</Radio.Button>
					);
				})}
			</Radio.Group>
		</div>
	);
};
export default TimeTabs;
